/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="areas-content">
    <Title title="征收房屋面积(平方米)"></Title>
    <ul>
      <li>
        <v-chart auto-resize :options="chart1"/>
      </li>
      <li>
        <v-chart auto-resize :options="chart2"/>
      </li>
      <li>
        <v-chart auto-resize :options="chart3"/>
      </li>
    </ul>
    <p class="mark">征收房屋总面积<b style="font-size: 1.5rem;color: #50c7eb;font-weight: bold;">{{area.total && area.total.toFixed(0)}}</b>平方</p>
  </div>
</template>

<script>
import Title from "../Title";
import ECharts from "vue-echarts";
const getOptions = (color, text, num, total) => {
  if(!num) return {};
  let option = {
    animation: true,
    series: [
      {
        type: "pie",
        center: ["50%", "50%"], //圆心坐标（div中的%比例）
        radius: ["90%", "80%"], //半径
        x: "0%", // for funnel
        hoverAnimation: false,
        itemStyle: {
          //上层样式
          normal: {
            color: color,
            label: {
              show: true,
              position: "center",
              formatter: "{b}",
              textStyle: {
                baseline: "bottom",
                fontSize: window.chartFontSize
              }
            },
            labelLine: {
              show: false
            }
          }
        }, //graphStyleA,//图形样式 // 当查到的数据不存在（并非为0），此属性隐藏
        data: [
          {
            name: (num).toFixed(0),
            value: (num / total) * 100,
            itemStyle: {
              //上层样式
              normal: {
                color: color,
                label: {
                  show: true,
                  position: "center",
                  formatter: "{b}",
                  textStyle: {
                    baseline: "bottom",
                    fontSize: window.chartFontSize*1.5
                  }
                },
                labelLine: {
                  show: false
                }
              }
            }
          },
          {
            name: text,
            value: 100 - (num / total) * 100,
            itemStyle: {
              normal: {
                color: "rgba(187,187,187,1)",
                label: {
                  show: false,
                  position: "center",
                  fontSize: window.chartFontSize * 1.5,
                  textStyle: {
                    baseline: "bottom",
                    fontSize: window.chartFontSize * 1.5
                    // color: '#fff'
                  }
                },
                labelLine: {
                  show: false
                }
              }
              // emphasis: {
              //   //悬浮式样式
              //   color: "rgba( 0,0,0,0)"
              // }
            }
          }
        ]
      }
    ]
  };
  return option;
};

export default {
  props: {
    area: Object
  },
  data() {
    return {
      chart1: getOptions("#3cd686", "已完成", this.area.signed, this.area.total),
      chart2: getOptions("#45f8f9", "进行中", this.area.ingsigned, this.area.total),
      chart3: getOptions("#ff6900", "计划中", this.area.unsigned, this.area.total)
    };
  },
  watch: {
    area: function(data) {
      this.chart1 = getOptions("#3cd686", "已完成", data.signed, data.total);
      this.chart2 = getOptions("#45f8f9", "进行中", data.ingsigned, data.total);
      this.chart3 = getOptions("#ff6900", "计划中", data.unsigned, data.total);
    }
  },
  components: {
    Title,
    "v-chart": ECharts
  }
};
</script>

<style lang='less' scoped>
@import "../../utils/theme.less";

.areas-content {
  width: 100%;
  height: 100%;
  position: relative;
  ul {
    width: 100%;
    height: 60%;
    overflow: hidden;
    position: relative;
    li {
      width: 33.333%;
      float: left;
      height: 100%;
    }
  }
  .mark {
    font-size: 1.3rem;
    padding: 0.5vw;
    color: #fff;
  }
}
</style>
